<template>
  <div>
    <breadcrumb></breadcrumb>
    <!-- 列表 -->
    <div class="main">
      <div class="main_head">
        <div class="main_head_left">
          <div class="inputItem">
            <div class="title">货物名称</div>
            <div class="inputBox">
              <el-input
                v-model="cargoName"
                @keyup.enter.native="cread(1)"
                clearable
              >
              </el-input>
            </div>
          </div>
          <div class="inputItem">
            <div class="title">品牌名称</div>
            <div class="inputBox">
              <el-input
                v-model="brand"
                @keyup.enter.native="cread(1)"
                clearable
              >
              </el-input>
            </div>
          </div>
          <el-button
            type="primary"
            size="small"
            icon="el-icon-search"
            @click="cread(1)"
            >查询</el-button
          >
          <el-button
            type="plain"
            size="small"
            icon="el-icon-refresh-right"
            @click="CleanUp"
            >清空</el-button
          >
        </div>
        <div class="main_head_right">
          <el-button
            class="addCargoOwner"
            @click="exportDown"
            :loading="exportLoading"
          >
            导出货物数据统计
          </el-button>
        </div>
      </div>

      <div class="list">
        <el-table :data="records" style="width: 100%" header-align="left">
          <el-table-column align="left" width="70" label="序号">
            <template slot-scope="scope">
              {{ (scope.$index + 1) +(pageIndex-1)*15 }}
            </template>
          </el-table-column>
          <el-table-column
            align="left"
            prop="cargo_type"
            label="大类"
          ></el-table-column>
          <el-table-column align="left" prop="cargo_name" label="货物名称">
          </el-table-column>
          <el-table-column align="left" prop="measure_unit" label="运量单位">
          </el-table-column>
          <el-table-column align="left" prop="cargo_weight" label="运量">
          </el-table-column>
          <el-table-column align="left" prop="brand" label="品牌">
          </el-table-column>
          <el-table-column align="left" prop="cargo_volume" label="规格">
          </el-table-column>
          <el-table-column align="left" prop="cargo_quantity" label="数量">
          </el-table-column>
        </el-table>
      </div>
      <div class="paginationBox">
        <el-pagination
          @current-change="changePages($event)"
          class="pagination"
          background
          layout="slot,prev, pager, next"
          :current-page.sync="pageIndex"
          :total="data.total * 1"
          :page-size="data.size * 1"
          :pager-count="5"
        >
          <template slot>
            <span
              style="
                color: #686868;
                font-size: 12px;
                margin-right: 20px;
                display: inline-block;
              "
            >
              共{{ data.total }}条,每页{{ data.size }}条
            </span>
          </template>
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import {
  workbook2blob,
  openDownloadDialog,
} from "@/common/blobAndOpenDownload.js";
import XLSX from "xlsx";
import breadcrumb from "@/components/breadcrumb.vue";
import httpApi from "@/http";
// import exportFromJSON from 'export-from-json'

export default {
  data() {
    return {
      stateValue: "",
      options: [
        {
          value: "",
          label: "全部",
        },
        {
          value: "0",
          label: "正常",
        },
        {
          value: "1",
          label: "异常",
        },
      ],
      createTime: [],
      title: "新增地址",
      records: [],
      records1: [],
      data: {
        total: "",
        size: "",
      },
      exportLoading: false,
      formdata: {},
      loading: false,
      pageIndex: 1,
      pageSize: 15,
      dialogVisible: false,
      cargoType: "",
      cargoName: "",
      brand: "",
    };
  },
  methods: {
    //导出文档
    async exportDown() {
      let data = {
        pageIndex: this.pageIndex,
        pageSize: this.pageSize,
        cargoType: this.cargoType,
        cargoName: this.cargoName,
        brand: this.brand,
      };
      let res = await this.$http.basicSettingApi.queryExportGoodsStatistics(data);
      this.exportLoading = true;
      let cont = JSON.parse(JSON.stringify(res.data.data));
      cont.forEach((item, i) => {
        for (let k in item) {
          if (!item[k]) {
            item[k] = "--";
          }
        }
        if (item.measure_unit == 1) {
          item.measure_unit = '车'
        } else if (item.measure_unit == 2) {
          item.measure_unit = '吨'
        } else if (item.measure_unit == 3) {
          item.measure_unit = '件'
        } else if (item.measure_unit == 4) {
          item.measure_unit = 'KG'
        } else if (item.measure_unit == 5) {
          item.measure_unit = '箱'
        } else if (item.measure_unit == 6) {
          item.measure_unit = '托'
        } else if (item.measure_unit == 7) {
          item.measure_unit = '台'
        }else if (item.measure_unit == 8) {
          item.measure_unit = '方'
        }
        if(item.cargo_quantity & item.cargo_quantity!=undefined & item.measure_unit!=undefined){
        item.cargo_quantity = item.cargo_quantity  + item.measure_unit
        }
      });
      const sheetData1 = cont.map((item, index) => ({
        序号: index + 1,
        大类: item.cargo_type,
        货物名称: item.cargo_name,
        运量单位: item.measure_unit,
        运量: item.cargo_weight,
        品牌: item.brand,
        规格: item.cargo_volume,
        数量: item.cargo_quantity,
      }));
      const sheet1 = XLSX.utils.json_to_sheet(sheetData1);
      for (let key in sheet1) {
        // console.log(key);
        if (key != "!ref" && key != "!merges" && key != "!cols") {
          sheet1[key].s = {
            alignment: {
              horizontal: "center",
              vertAlign: "center",
            },
          };
        }
      }
      let cols = []; // 设置每列的宽度
      // wpx 字段表示以像素为单位，wch 字段表示以字符为单位
      // console.log(sheetData1);
      let headCol = [
        "序号",
        "大类",
        "货物名称",
        "运量单位",
        "运量",
        "品牌",
        "规格",
        "数量",
      ];
      for (let i = 0; i <= headCol.length; i++) {
        let col = {};
        col.wch = this.getCellWidth(headCol[i], sheetData1);
        cols.push(col);
      }
      sheet1["!cols"] = cols; // 设置列宽信息到工作表
      const wb = XLSX.utils.book_new(); // 初始化一个excel文件
      XLSX.utils.book_append_sheet(wb, sheet1, "货物数据统计");
      const workbookBlob = workbook2blob(wb);
      openDownloadDialog(workbookBlob, `货物数据统计.xlsx`);
      this.exportLoading = false;
    },
    getCellWidth(value, sheetData) {
      //计算每列的需设置的宽度
      if (value == "序号") {
        return 10;
      } else if (value == "大类") {
        return 13;
      } else if (value == "货物名称") {
        return 30;
      } else if (value == "运量单位") {
        return 18;
      } else if (value == "运量") {
        return 18;
      } else if (value == "品牌") {
        return 18;
      } else if (value == "规格") {
        return 18;
      } else if (value == "数量") {
        return 18;
      }
    },
    changePages(e) {
      this.pageIndex = e;
      this.cread();
    },
    CleanUp() {
      this.cargoType = "";
      this.cargoName = "";
      this.brand = "";
      this.cread();
    },
    async cread(e) {
      if (e) {
        this.pageIndex = 1;
      }
      let data = {
        pageIndex: this.pageIndex,
        pageSize: this.pageSize,
        cargoType: this.cargoType,
        cargoName: this.cargoName,
        brand: this.brand,
      };
      let res = await this.$http.basicSettingApi.queryGoodsStatistics(data);
      this.data.total = res.data.data.total;
      this.data.size = res.data.data.size;
      this.records = res.data.data.records;
      this.records.forEach((item, i) => {
        for (let k in item) {
          if (!item[k]) {
            item[k] = "--";
          }
        }
        if (item.measure_unit == 1) {
          item.measure_unit = '车'
        } else if (item.measure_unit == 2) {
          item.measure_unit = '吨'
        } else if (item.measure_unit == 3) {
          item.measure_unit = '件'
        } else if (item.measure_unit == 4) {
          item.measure_unit = 'KG'
        } else if (item.measure_unit == 5) {
          item.measure_unit = '箱'
        } else if (item.measure_unit == 6) {
          item.measure_unit = '托'
        } else if (item.measure_unit == 7) {
          item.measure_unit = '台'
        }else if (item.measure_unit == 8) {
          item.measure_unit = '方'
        }
        if(item.cargo_quantity & item.cargo_quantity!=undefined & item.measure_unit!=undefined){
        item.cargo_quantity = item.cargo_quantity  + item.measure_unit
        }
      });
    },
  },
  created() {
    this.cread();
  },
  mounted() {},
  components: {
    breadcrumb,
  },
};
</script>

<style lang="scss" scoped>
.paginationtext {
  font-size: 12px;
  color: #1890ff;
}
.paginationtext span {
  margin-right: 10px;
}
.flex-fpkp {
  display: flex;
  margin-bottom: 15px;
}
.main {
  width: 100%;

  height: calc(100vh - 127px);
  background-color: #fff;
  padding: 0px 30px 0px 30px;
  // overflow-x: scroll;
  // min-width: 970px;

  .main_head {
    padding: 10px 0;

    .main_head_left {
      font-size: 12px;
      color: #262626;
      display: flex;

      .inputItem {
        display: flex;
        align-items: center;
        margin-right: 23px;

        > .title {
          color: #262626;
          font-size: 12px;
          margin-right: 7px;
        }

        > .inputBox {
          width: 160px;

          .select {
            ::v-deep .el-input__icon {
              line-height: 0;
            }
          }

          ::v-deep .el-input__inner {
            height: 32px;
            font-size: 12px;
          }

          ::v-deep .el-input__inner::placeholder {
            color: #c3c3c3;
            font-size: 12px;
          }
        }
      }
    }

    .main_head_right {
      display: flex;
      justify-content: flex-end;
      margin-top: 10px;

      .addCargoOwner {
        background-color: #1890ff;
        border-radius: 4px;
        height: 32px;
        color: #ffffff;
        font-size: 12px;
        padding: 8px 17px 9px 17px;
        transition: 0.2s;
        cursor: pointer;
        margin-right: 17px;

        .iconBtn {
          margin-right: 7px;
          font-size: 12px;
        }

        &:hover {
          opacity: 0.8;
        }
      }
    }
  }

  .list {
    height: calc(100% - 143px);

    ::v-deep .el-table__body-wrapper {
      height: calc(100vh - 320px);
      overflow-y: scroll;
    }

    // 表头样式
    ::v-deep .el-table__header th {
      background-color: #f0f6fd;
      color: #262626;
      font-size: 12px;
      font-weight: bold;
      text-align: left;

      // 表 body的td
      ::v-deep .el-table__body td {
        color: #595959;
        font-size: 12px;
      }
    }

    .stateBtns {
      height: 30px;

      ::v-deep .el-button {
        font-size: 12px;
        border: none;
        width: 76px;
        height: 30px;
        margin: 0 auto;
        box-sizing: border-box;
      }

      .icon-dian {
        font-size: 12px;
      }

      .Pass {
        background-color: #ecf5fe;
        color: #1890ff;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 10px 10px 9px;
      }

      .noPass {
        background-color: #fde8e9;
        color: #f7555d;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
  }

  .paginationBox {
    width: 100%;
    background-color: #fff;
    display: flex;
    height: 48px;
    align-items: center;

    .pagination {
      margin-left: auto;
    }
  }
}

.dialog {
  .link {
    color: #1890ff;
    cursor: pointer;
    transition: 0.2s;
    margin-bottom: 15px;
    margin-left: 335px;
    display: inline-block;

    &:hover {
      opacity: 0.8;
    }
  }

  // 标题
  ::v-deep .el-dialog__header {
    border-bottom: 1px solid #f0f0f0;
    padding: 15px 20px;
    color: #262626;
    font-size: 14px;
    font-weight: bold;
    height: 50px;
  }

  ::v-deep .el-dialog__title {
    font-size: 14px;
    color: #303133;
    font-weight: bold;
  }

  //关闭图标
  ::v-deep .el-dialog__headerbtn .el-dialog__close {
    font-size: 15px;
  }

  ::v-deep .el-dialog__body {
    padding: 25px 40px 24px;
  }

  //   表格
  ::v-deep .el-form-item__label {
    line-height: 32px;
    font-size: 12px;
    color: #262626;
    padding-top: 4px;
    width: 100%;
  }

  ::v-deep .el-input__inner {
    line-height: 32px;
    height: 32px;
    padding: 0 10px;
  }

  .cancelBtn {
    width: 80px;
    height: 36px;
    border: 1px solid #d9d9d9;
    color: #262626;
    font-size: 12px;
    border-radius: 4px;
    background-color: #fff;
  }

  .submitBtn {
    background-color: #1890ff;
    width: 80px;
    height: 36px;
    color: #fff;
    border-radius: 4px;
    font-size: 12px;
  }

  .inputSelect_left {
    height: 32px;

    ::v-deep .el-input__inner {
      border-radius: 4px 0px 0px 4px;
    }
  }

  .inputSelect_right {
    height: 32px;

    ::v-deep .el-input__inner {
      border-radius: 0px 4px 4px 0px;
      border-left: none;
      background-color: #f5f7fa;
      font-size: 12px;
      color: #606266;
    }
  }

  ::v-deep .el-input__icon {
    line-height: 0;
  }

  ::v-deep .el-form-item__content {
    line-height: 0;
  }

  .notes ::v-deep .el-textarea .el-input__count {
    bottom: 15px;
    color: #c0c4cc;
  }
}
</style>